<!--

    Copyright (c) 2015 Codenvy, S.A.
    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v1.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v10.html

    Contributors:
      Codenvy, S.A. - initial API and implementation

-->
<che-toolbar che-title="Plug-Ins"></che-toolbar>

<md-content layout="column" class="plugins-content" md-scroll-y flex>

  <che-panel che-title="Installed">
    <div class="plugins-panel-subtitle">Plug-ins that are packaged and linked in this Che assembly.</div>

    <div class="plugins-nothing-now" ng-show="(adminPluginsCtrl.plugins | filter: { status: 'INSTALLED' }).length == 0">
      No user plug-ins are currently installed in this Che assembly.
    </div>

    <div ng-show="(adminPluginsCtrl.plugins | filter: { status: 'INSTALLED' }).length > 0">

      <table flex class="plugins-table">
        <thead>
        <tr>
          <th>Plug-In</th>
          <th>Version</th>
          <th>Scope</th>
          <th>Action</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="plugin in adminPluginsCtrl.plugins | filter: { status: 'INSTALLED' }">
          <td>{{plugin.name}}</td>
          <td>{{plugin.version}}</td>
          <td>{{plugin.category}}</td>
          <td> <che-link che-no-padding ng-click="adminPluginsCtrl.uninstall(plugin.name)" che-link-text="Uninstall"></che-link>
          </td>
        <tr>
        <tr ng-repeat="plugin in adminPluginsCtrl.plugins | filter: { status: 'STAGED_UNINSTALL' }">
          <td>{{plugin.name}}</td>
          <td>{{plugin.version}}</td>
          <td>{{plugin.category}}</td>
          <td class="plugins-greyed-action">To Be Uninstalled</td>
        <tr>
        </tbody>
      </table>



      <div class="plugins-review-box" ng-show="(adminPluginsCtrl.plugins | filter: { status: 'STAGED_UNINSTALL' }).length > 0">
        {{(adminPluginsCtrl.plugins | filter: { status: 'STAGED_UNINSTALL' }).length}} staged for installation<!--<che-link che-no-padding ng-click="adminPluginsCtrl.scrollToStaged()" che-link-text="Review"></che-link>-->
      </div>


    </div>

  </che-panel>


  <che-panel che-title="Available">
    <div class="plugins-panel-subtitle">Plug-ins that can be added to this Che assembly.</div>

    <div layout="row">
      <div class="plugins-staged-zone-action" layout="row" flex="66">
        <che-dropzone che-callback-controller="adminPluginsCtrl"></che-dropzone>
      </div>
      <div layout="row" flex layout-align="end center">
        <che-button-default che-button-title="refresh"></che-button-default>
      </div>
    </div>


    <div ng-show="((adminPluginsCtrl.plugins | filter: { status: 'AVAILABLE' }).length > 0) || ((adminPluginsCtrl.plugins | filter: { status: 'STAGED_INSTALL' }).length > 0)">

      <table flex class="plugins-table">
        <thead>
        <tr>
          <th>Plug-In</th>
          <th>Version</th>
          <th>Scope</th>
          <th>Action</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="plugin in adminPluginsCtrl.plugins | filter: { status: 'AVAILABLE' }">
          <td>{{plugin.name}}</td>
          <td>{{plugin.version}}</td>
          <td>{{plugin.category}}</td>
          <td>
            <che-link ng-click="adminPluginsCtrl.install(plugin.name)" che-link-text="Stage"></che-link>
            <che-link ng-click="adminPluginsCtrl.remove($event, plugin.name)" che-link-text="Delete"></che-link>
          </td>
        <tr>
        <tr ng-repeat="plugin in adminPluginsCtrl.plugins | filter: { status: 'STAGED_INSTALL' }">
          <td>{{plugin.name}}</td>
          <td>{{plugin.version}}</td>
          <td>{{plugin.category}}</td>
          <td class="plugins-greyed-action">To Be Installed</td>
        <tr>

        </tbody>
      </table>


      <div class="plugins-review-box" ng-show="(adminPluginsCtrl.plugins | filter: { status: 'STAGED_INSTALL' }).length > 0">
        <ng-pluralize count="(adminPluginsCtrl.plugins | filter: { status: 'STAGED_INSTALL' }).length"
                      when="{'one': '{} staged change',
                       'other': '{} staged changes'}">
        </ng-pluralize> on available plug-ins:&nbsp;<che-link ng-click="adminPluginsCtrl.scrollToStaged()" che-link-text="Review"></che-link>
      </div>
    </div>

  </che-panel>

  <a id="plugin-staged"></a>
  <che-panel che-title="Staged">
    <div class="plugins-panel-subtitle">Plug-ins that will be packaged and linked into this Che assembly.</div>

    <div class="plugins-nothing-now" ng-show="(adminPluginsCtrl.plugins | filterStagedPlugins).length == 0">
      There are no plug-ins currently staged.
    </div>

    <div ng-show="(adminPluginsCtrl.plugins | filterStagedPlugins).length > 0">

      <table flex class="plugins-table">
        <thead>
        <tr>
          <th>Plug-In</th>
          <th>Version</th>
          <th>Scope</th>
          <th>State</th>
          <th>Action</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="plugin in adminPluginsCtrl.plugins | filterStagedPlugins">
          <td>{{plugin.name}}</td>
          <td>{{plugin.version}}</td>
          <td>{{plugin.category}}</td>
          <td>{{adminPluginsCtrl.prettyPrintStatus(plugin)}}</td>
          <td><che-link che-no-padding ng-click="adminPluginsCtrl.cancelStage(plugin)" che-link-text="Remove"></che-link></td>
        <tr>
        </tbody>
      </table>
      <div layout="column" layout-align="end end">
        <che-button-primary ng-click="adminPluginsCtrl.buildAssembly()" ng-disabled="adminPluginsCtrl.buildInProgress" che-button-title="build assembly"></che-button-primary>
      </div>

    </div>

    <div layout="column">
      <div ng-show="adminPluginsCtrl.reloadcheDone">Che App Reloaded</div>
      <div class="plugins-build-failed" ng-show="adminPluginsCtrl.buildCheFailed">Build of Che App failed. See log below</div>
      <div layout="row" ng-show="adminPluginsCtrl.displayReloadChe">
        <che-button-default ng-click="adminPluginsCtrl.reloadChe()" che-button-title="Reload Eclipse Che"></che-button-default>
        <div ng-show="adminPluginsCtrl.reloadcheInProgress"><md-progress-circular md-diameter="25" md-theme="maincontent-theme" md-mode="indeterminate"></md-progress-circular></div>
      </div>
      <div layout="row" layout-align="start center" ng-show="adminPluginsCtrl.buildInProgress">
        <div class="plugin-install-build-label">Building...</div>
        <div><md-progress-circular md-diameter="25" md-theme="maincontent-theme" md-mode="indeterminate"></md-progress-circular></div>
      </div>
      <div layout="column">
        <che-button-default ng-show="adminPluginsCtrl.currentBuildLog.length > 0" ng-click="adminPluginsCtrl.toggleDisplayLog()" che-button-title="{{adminPluginsCtrl.displayLog ? 'Hide Log' : 'Show Build Log'}}"></che-button-default>
        <div ng-show="adminPluginsCtrl.displayLog && adminPluginsCtrl.currentBuildLog.length > 0" class="plugins-install-output" ng-bind-html="adminPluginsCtrl.currentBuildLog">
        </div>

      </div>
    </div>

  </che-panel>


  <div class="plugin-empty-space"></div>


</md-content>
